import { ButtonHTMLAttributes, useCallback, useState } from "react";
import { Property } from 'csstype';
import cls from 'classnames';
import styles from './index.module.scss';

export interface LongButtonProps extends ButtonHTMLAttributes<any> {
  color?: Property.Color;
  bgColor?: Property.Color;
  noRound?: boolean;
}

export const LongButton = ({
  className,
  color,
  bgColor,
  noRound,
  children,
  style,
  ...others
}: LongButtonProps) => {
  const [colors, setColors] = useState({
    color: color || '#FFFFFF',
    backgroundColor: bgColor || '#FC996E',
  });

  const reverseColor = useCallback(() => setColors({
    color: colors.backgroundColor,
    backgroundColor: colors.color,
  }), [colors]);

  style = {
    ...style,
    ...colors,
  };

  return (
    <button
      className={cls(styles.longBtn, noRound && styles.noRound, className)}
      style={style}
      onMouseEnter={reverseColor}
      onMouseLeave={reverseColor}
      {...others}
    >
      {children}
    </button>
  )
}
